<script setup>
import { ipc } from '@/utils/ipcRenderer'
import { ref } from "vue";
import { ipcApiRoute } from '@/api/index'
import {message} from "ant-design-vue";
import LxCard from '@/components/LxCard/index.vue'
import SystemQuicklySetting from '@/components/systemQuicklySetting/index.vue'
import {useSystemSettingStore} from "@/store/systemSetting";

const systemRunstate = ref()
const isLoading = ref(false)
const getSysRunState = () => {
  ipc.invoke(ipcApiRoute.systemService.getSysRunState).then(res => {
    systemRunstate.value = res
    isLoading.value = true
  })
}

const percentHandler = (value) => {
  console.log(value)
  if(value.indexOf('G') !== -1){
    return value
  } else {
    return value*1 + '%'
  }
}

getSysRunState()
// setInterval(getSysRunState,5000)

</script>

<template>
  <div class="systemService" >
    <div class="container w-full h-full">
      <LxCard title="系统运行状态">
        <template v-if="isLoading" #content>
          <li class="mt-2" v-for="(item,index) in systemRunstate">
            <li v-for="i in item">
              <li v-if="Array.isArray(i.value)">
                <li class="" v-for="j in i.value">{{ j.label }}
                  <a-progress :strokeColor="useSystemSettingStore().ui.primaryColor" class="w-full pr-4" type="line" :percent="j.value" />
                </li>
              </li>
              <!--      普通        -->
              <div class="xxx" v-else>
                <li>
                  <span>
                    {{ i.label }}
                  </span>
                  <a-progress :strokeColor="useSystemSettingStore().ui.primaryColor" status="active" class="w-full pr-4" type="line" :format="percent => percentHandler(percent)"  :percent="i.value"></a-progress>
                </li>
              </div>
            </li>
          </li>
        </template>
        <template v-else #content>
          <a-skeleton class="mt-2"  :paragraph="{ rows: 4 }" :title="false" active />
        </template>
      </LxCard>
      <div class="">
        <lx-card title="快捷设置">
          <template #content> <system-quickly-setting></system-quickly-setting>  </template>
        </lx-card>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">

</style>